<!DOCTYPE html>
<html lang="en">

<head>
  <title>糖豆豆tangdd.cn</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入图标 -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <!--引入共同样式以及字体 -->
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1223203_6oclp9p7myp.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- base里面只写自创公共样式 -->
  <link rel="stylesheet" type="text/css" href="css/base.css">
  <!-- index.css是的css -->
  <link rel="stylesheet" href="css/cart.css">
</head>

<body>
  <!-- 导航栏开始 -->
  <div class="headerpage "></div>
  <!-- 导航栏结束 -->
  <!-- 页面主体内容开始1 -->
  <!-- 目前状态信息1 -->
  <div class="wid">
    <div class="state">
      <ul>
        <li class="active">
          <div></div>
          <i class="icon iconfont icon-selected"></i>
          <p>1</p>
          <span>购物车</span>
        </li>
        <li class="">
          <div class="lang-line"></div>
          <i class="icon iconfont icon-selected"></i>
          <p>2</p>
          <span>确认订单</span>
        </li>
        <li class="">
          <div class="lang-line"></div>
          <i class="icon iconfont icon-selected"></i>
          <p>3</p>
          <span>提交订单</span>
        </li>
        <li class="">
          <div class="lang-line"></div>
          <i class="icon iconfont icon-selected"></i>
          <p>4</p>
          <span>支付成功</span>

        </li>
        <li class="">
          <div></div>
        </li>
      </ul>
    </div>
    <!-- 目前状态信息2 -->
    <!-- 订单信息1 -->
    <div class="order">
      <p>订单信息</p>
      <!-- 订单标题模块1 -->
      <div class="order-title">
        <div class="one">商品</div>
        <div class="two">属性</div>
        <div class="three">单价</div>
        <div class="four">数量</div>
        <div class="five">优惠方式</div>
        <div class="six">金额</div>
        <div class="seven">操作</div>
      </div>
      <!-- 订单标题模块2 -->
      <!-- 订单内容模块1 -->
      <div class="order-details">
        <div class="details-img">
          <img src="images/index/兔小萌.png" alt="">
          <div>
            <p>极地牛乳</p>
            <p></p>
            <p>TANG CAKE[经典系列]</p>
          </div>
        </div>
        <div class="details-size">
          <p>1.2磅</p>
          <i>标配</i>
          <span>餐具套装1套</span>
        </div>
        <div class="details-price">
          <p>218.00</p>
        </div>
        <div class="details-count">
          <i class="icon iconfont icon-jianhao1"></i>
          <b></b>
          <input type="text" value=1>
          <b></b>
          <i class="icon iconfont icon-jiahao1"></i>
        </div>
        <div class="details-discount">
          <p>无优惠</p>
        </div>
        <div class="details-total">
          <p>￥ 218.00</p>
        </div>
        <div class="details-delete">
          <i class="icon iconfont icon-chahao1"></i>
        </div>
      </div>
      <!-- 订单内容模块2 -->
      <!-- 添加蜡烛1 -->
      <div class="order-others">
        <div>
          <img src="images/index/icon_1.png" alt="">
          <span>添加蜡烛</span>
        </div>
        <div>
          <img src="images/index/icon_2.png" alt="">
          <span>添加餐具</span>
        </div>
        <div>
          <span>共计</span>
          <span>1</span>
          <span>件商品</span>
          <img src="images/index/icon_cart_dustbin.png" alt="">
        </div>
      </div>
      <!-- 添加蜡烛2 -->
      <!-- 添加蜡烛隐藏部分1 -->
      <div class="order-hidden dn">
        <!-- 餐具隐藏小节1 -->
        <div>
          <span>每款经典系列蛋糕免费赠送1套标准蜡烛</span>
          <img src="images/index/lzuncheck.png" alt="">
        </div>
        <div class="add-candle">
          <div>
            <img src="images/index/candle1.jpg" alt="">
            <div class="add-one">
              <p>TANG cake 标准蜡烛</p>
              <p></p>
              <p>￥5.0</p>
              <div class="details-count">
                <i class="icon iconfont icon-jianhao1"></i>
                <b></b>
                <input type="text" value=1>
                <b></b>
                <i class="icon iconfont icon-jiahao1"></i>
              </div>
            </div>
          </div>
          <div>
            <img src="images/index/candle2.jpg" alt="">
            <div class="add-one">
              <p>TANG Happy Birthday 字母蜡烛</p>
              <p></p>
              <p>￥10.0</p>
              <div class="details-count">
                <i class="icon iconfont icon-jianhao1"></i>
                <b></b>
                <input type="text" value=1>
                <b></b>
                <i class="icon iconfont icon-jiahao1"></i>
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <div>确定</div>
        <i class="icon iconfont icon-shangjiantou"></i>
        <!-- 餐具隐藏小节2 -->
      </div>
      <!-- 添加蜡烛隐藏部分2 -->
      <!-- 添加餐具隐藏部分1 -->
      <div class="order-hidden tableware-hidden dn">
        <!-- 餐具隐藏小节1 -->
        <div>
          <span class="text-gray ">注：共赠送1套餐具；伴手礼星座系列蛋糕内含不锈钢刀叉；如需额外购买 3.0元/套</span>
        </div>
        <div>
          <span>TANG cake &emsp;餐具   &emsp;（每套含5人份餐盘、叉子、1把切刀） &emsp; &emsp; &emsp;</span>
          <span>￥5.0</span>
          <div class="details-count">
            <i class="icon iconfont icon-jianhao1"></i>
            <b></b>
            <input type="text" value=1>
            <b></b>
            <i class="icon iconfont icon-jiahao1"></i>
          </div>
        </div>
        <div>确定</div>
        <i class="icon iconfont icon-shangjiantou"></i>
        <!-- 餐具隐藏小节2 -->
      </div>
      <!-- 添加餐具隐藏部分1 -->
    </div>
    <!-- 订单信息2 -->
    <div class="total-price clearfix">
      <div>
        <div>商品总计:&emsp;&emsp;</div>
        <div>￥ 218.00</div>
      </div>
      <div>
        <div>运&emsp;&emsp;费:&emsp;&emsp;</div>
        <div>￥ 218.00</div>
      </div>
      <div>
        <div>优&emsp;&emsp;惠:&emsp;&emsp;</div>
        <div>￥ 218.00</div>
      </div>
      <div>
        <div>应付总额:&emsp;&ensp;</div>
        <div>￥ 218.00</div>
      </div>
    </div>
  </div>
  <!-- 页面主体内容开始1 -->
  <!-- 底部引入1 -->
  <div class="footerpage"></div>
  <!-- 底部引入2 -->
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/ajax.js"></script>
  <script src="js/details.js"></script>
  <script>
    $('.headerpage').load('header.html')
    $('.footerpage').load('footer.html')
  </script>
</body>

</html>